<template>
  <el-scrollbar ref="scrollbar" class="detail-list">
    <div class="m-4 rounded-md top" v-if="item">
      <el-image :src="item.img.full_url" fit="cover"></el-image>
      <span class="text-white" style="position: absolute; left: 50%; margin-left: -16px">{{ item.title }}</span>
    </div>
    <div ref="scroll"
      class="bottom grid grid-cols-1 gap-2.5 m-1 md:grid-cols-3 lg:m-2.5 lg:grid-cols-4 lg:gap-2.5 xl:grid-cols-5">
      <FoodCard v-for="(item, index) in foods" :key="index" :data="item" @foodSelect="foodSelect" />
    </div>
    <!-- <div class="flex justify-center">
      <img v-if="loading" src="@/assets/svg/load.svg" style="height: 45px" alt="" />
      <span v-if="onMore()">没有更多了</span>
    </div> -->
  </el-scrollbar>
  <Drawer v-if="currentFood" :type="type" :food="currentFood" ref="drawerRef" />
</template>

<script setup lang="ts" scoped>
import {
  computed,
  onActivated,
  onMounted,
  reactive,
  ref,
  nextTick,
  watch,
} from "vue";
import FoodCard from "@/components/FoodCard.vue";
import { Afood, AfoodCate } from "@/api";
import { FoodsCategory, FoodItem } from "@/types/food";
import Drawer from "@/views/components/Drawer.vue";
import { PropType } from "vue";
defineProps({
  // 分类下的商品list
  foods: {
    type: Array as PropType<FoodItem[]>,
    required: true,
  },
  // 当前分类
  item: {
    type: Object as PropType<FoodsCategory>,
    required: true,
  }
});
const currentFood = ref<FoodItem>()
const type = ref(0)
const drawerRef = ref();

const foodSelect = (item: FoodItem) => {
  currentFood.value = item
  nextTick(() => {
    drawerRef.value.drawer = true;
  })
  // 
  console.log(currentFood.value);

}

// 滚动加载. 这次没有改功能
// onMounted(() => {
//   scrollbar.value.wrap.addEventListener("scroll", onScroll);
// });
// function onScroll() {
//   let isBottom =
//     scrollbar.value.wrap.scrollHeight - scrollbar.value.wrap.offsetHeight <
//     scrollbar.value.wrap.scrollTop;
//   console.log(isBottom);

//   // if (isBottom) {
//   //   ElMessage("到底了.");
//   // }

//   // loadMore();
// }

</script>

<style lang="scss" scoped>
.detail-list {
  ::v-deep .top {
    display: relative;
    height: 80px;
    overflow: hidden;
  }
}
</style>
